<template>
  <!-- 模块1 -->
  <div class="modular">
    <div class="modular_top">
      <div class="triangle"></div>
      <div class="modular_icon">
        <img src="@/assets/img/spjk.png" alt="">
      </div>
      <h2>视频监控</h2>
    </div>
    <div class="video_cont">
      <div class="video_select">
        <el-cascader :options="options1" @change="changeOption" class="test" popper-class="videoCascader">
          <template slot-scope="{ node, data }">
            <span>{{ data.label }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
        <el-cascader :options="options2" @change="changeOption2" popper-class="videoCascader">
          <template slot-scope="{ node, data }">
            <span>{{ data.label }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
        <el-cascader :options="options3" @change="changeOption3" popper-class="videoCascader">
          <template slot-scope="{ node, data }">
            <span>{{ data.label }}</span>
            <span v-if="!node.isLeaf"> ({{ data.children.length }}) </span>
          </template>
        </el-cascader>
      </div>
      <div class="video_box">
        <div class="item">
          <h2>{{ titles[1] }}</h2>
          <video @dblclick="fullScreenPlay(1)" ref="videoRef1" playsInline muted webkit-playsinline autoplay></video>
        </div>
        <div class="item">
          <h2>{{ titles[2] }}</h2>
          <video @dblclick="fullScreenPlay(2)" ref="videoRef2" playsInline muted webkit-playsinline autoplay></video>
        </div>
        <div class="item">
          <h2>{{ titles[3] }}</h2>
          <video @dblclick="fullScreenPlay(3)" ref="videoRef3" playsInline muted webkit-playsinline autoplay></video>
        </div>
        <div class="item">
          <h2>{{ titles[4] }}</h2>
          <video @dblclick="fullScreenPlay(4)" ref="videoRef4" playsInline muted webkit-playsinline autoplay></video>
        </div>
      </div>
      <div class="alert-box" v-show="alertFlg">
        <div class="lert-box-cont">
          <h2>1</h2>
          <div class="close" @click="alertFlg = !alertFlg"><i class="el-icon-close"></i></div>
          <video ref="videoRef5" playsInline muted webkit-playsinline autoplay></video>
        </div>
      </div>
    </div>
  </div>

</template>
<script>
import * as api from '@/assets/utils/api.js'
import Hls from 'hls.js'
// import videojs from 'video.js'
// import 'video.js/dist/video-js.css' //videojs样式
// import 'videojs-contrib-hls' //用于支持m3u8
// import '@videojs/http-streaming'
export default {
  data() {
    return {
      data: [],
      player: null,
      alertFlg: false,
      siteId: 1,
      options1: [],
      options2: [{
        value: '0',
        label: '请选择泵站',
      }],
      options3: [{
        value: '1',
        label: '#1',
      }, {
        value: '2',
        label: '#2',
      }, {
        value: '3',
        label: '#3'
      }, {
        value: '4',
        label: '#4'
      }],
      options: [{
        value: 'zhinan',
        label: '指南',
      }, {
        value: 'zujian',
        label: '组件',
      }, {
        value: 'ziyuan',
        label: '资源'
      }],
      selectedSiteId: null,
      selectedCamera: null,
      allCamera: {},
      titles: { 1: '', 2: '', 3: '', 4: '' }
    }
  },
  async created() {
    // 接口参数
    const id = { tenantid: 1128, siteId: this.siteId }
    const res = await api.videoMonitor(id)
    this.data = res.data

    let camera_data = window.localStorage.getItem('allCamera')
    if (camera_data) {
      this.allCamera = JSON.parse(camera_data)
    }

    for (let k in this.allCamera) {
      this.titles[k] = this.allCamera[k].camera_name
      this.video(this.allCamera[k].url, this.$refs['videoRef' + k])
    }
    this.getcamera()
  },
  methods: {
    async getcamera() {
      this.options1 = []
      let camera_box = await api.cameraCombobox({ tenantid: 1128 })
      camera_box.data.forEach(dt => {
        this.options1.push({ label: dt.text, value: dt.id })
      })
    },
    async changeSiteId(value) {
      await this.getcamera()
      const id = { tenantid: 1128, siteId: value }
      const res = await api.house(id)
      let temp = []
      this.options1.forEach(item => {
        if (Number(item.value) == res.data[0].id) {
          temp = [item]
        }
      })
      this.options1 = temp
      this.changeOption([value])
    },
    video(url, ref) {
      var hls = new Hls()
      hls.loadSource(url)
      hls.attachMedia(ref)
    },
    async changeOption(e) {
      let id = e[0]
      let camera_box = await api.cameraCombobox({ tenantid: 1128, siteId: id })
      this.selectedSiteId = id
      this.options2 = []
      camera_box.data.forEach(dt => {
        this.options2.push({ label: dt.text, value: dt.id })
      })
    },
    async changeOption2(e) {
      let id = e[0]
      if (id != null) {
        const res = await api.videoMonitor({ tenantid: 1128, siteId: this.selectedSiteId, cameraId: id })
        this.selectedCamera = res.data[0]
      } else {
        this.selectedCamera = null
      }
    },
    async changeOption3(e) {
      let id = e[0]
      if (this.selectedCamera != null) {
        this.allCamera[id] = this.selectedCamera
        this.video(this.selectedCamera.url, this.$refs['videoRef' + id])
        this.titles[id] = this.selectedCamera.camera_name
        window.localStorage.setItem('allCamera', JSON.stringify(this.allCamera))
      }
    },
    fullScreenPlay(id) {
      this.alertFlg = true
      let dt = this.allCamera[id]
      document.querySelector('.alert-box h2').innerHTML = dt.camera_name
      this.video(dt.url, this.$refs.videoRef5)
    }
  }
}
</script>

<style lang="scss" scoped>
.video_cont {
  .video_select {
    display: flex;
    justify-content: center;
    width: 73%;
    margin: 0 auto;
    padding-top: 0.44rem;
  }

  .video_box {
    width: 88%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
      width: 48.5%;
      height: 0.95rem;
      margin: 0.06rem 0;
      background: url(@/assets/img/videoBg.png);
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      h2 {
        color: #fff;
        font-size: 0.12rem;
        transform: scale(0.7);
      }

      .myPlayer {
        width: 100%;
        height: 100%;
      }

      video {
        width: 93%;
        height: 80%;
        object-fit: fill;
        padding-bottom: 0.05rem;
      }
    }
  }

  .alert-box {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: rgba($color: #000000, $alpha: .5);

    .lert-box-cont {
      width: 70%;
      height: 70%;
      background: url(@/assets/img/videoBg.png);
      background-size: 100% 100%;
      position: relative;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      // justify-content: space-between;

      video {
        width: 97%;
        height: 90%;
        object-fit: fill;
        padding-bottom: 0.05rem;
      }

      h2 {
        color: #fff;
        font-size: 0.25rem;
        margin: 0.05rem 0;
      }

      .close {
        position: absolute;
        right: 1%;
        z-index: 10;
        top: 1%;
        cursor: pointer;
        display: flex;

        i {
          font-size: 0.4rem;
          color: #fff;
        }
      }
    }

    // .el-cascader__dropdown {
    //   background: #1f356e !important;
    //   border: 1px solid #708fe0 !important;

    //   li {
    //     border-bottom: 1px solid #708fe0;
    //   }

    //   span {
    //     color: #fff;
    //   }

    //   .el-cascader-node:not(.is-disabled):hover {
    //     background-color: #364e8d;
    //   }
    // }

    // .el-popper[x-placement^="bottom"] .popper__arrow::after {
    //   border-bottom-color: #1f356e !important;
    // }
    // .el-popper[x-placement^="bottom"] .popper__arrow::after {
    //   border-bottom-color: #1f356e !important;
    // }
  }
}
// ::v-deep(.el-popper[x-placement^="bottom"] .popper__arrow::after) {
//   border-bottom-color: #1f356e !important;
// }
</style>
